<template>
  <div class="product-detail">
    <div class="safe">
      <div class="page_posit">
        <a href="/index.html">首页</a>
        <i>&gt;</i>
        <span v-if="product.category && product.category.full_name">
          <router-link v-for="(item, index) in titleTop" :key="index" :to="`/select?id=${item.id}`">
            <span>
              {{item.titlea}}
              <i>&gt;</i>
            </span>
          </router-link>
        </span>
        <!--        <a href="/product/select.aspx?cataid=44&amp;brand=西门子&amp;series=5SY（国产）">中低压配电</a><i>&gt;</i>-->
        <!--        <a href="/product/select.aspx?cataid=44&amp;brand=西门子&amp;series=5SY（国产）">微型断路器</a><i>&gt;</i>-->
        <!-- <router-link :to="`/select?category_id=${product.category_id}`">{{product.category_name}}</router-link><i>&gt;</i> -->
        <span class="c333">{{ product.long_title}}</span>
      </div>
      <div class="pro_detail clearfix">
        <div class="xs_left">
          <div class="box">
            <div class="tb-booth">
              <a class="tb_img" href="javascript:;" style="position: relative;">
                <image-magnifier
                  :src="product.image"
                  :zoom-src="product.image"
                  width="400"
                  height="400"
                  zoom-width="400"
                  zoom-height="400"
                  :delay-in="300"
                />
              </a>
            </div>
            <div class="box_list">
              <div id="ibox">
                <ul id="thumblist" class="tb-thumb clearfix">
                  <li
                    v-for="item in goods"
                    :key="item.id"
                    :class="{ 'tb-selected': item.id === activeId}"
                    @mouseenter="tbSelect(item.id)"
                  >
                    <a data="#2" href="javascript:;">
                      <img :src="item.mini" />
                    </a>
                  </li>
                </ul>
              </div>
            </div>
            <div class="page_thumb">
              <a class="pre" href="javascript:;">
                <i class="bg_ico">&lt;</i>
              </a>
              <a class="next" href="javascript:;">
                <i class="bg_ico">&gt;</i>
              </a>
            </div>
          </div>
        </div>
        <div class="xs_right">
          <h3 class="name">{{ product.long_title}}</h3>
          <div class="pro_desc clearfix mt20">
            <p class="wp100">
              <b class="txtParam">产品型号：</b>
              <span>{{product.model_name}}</span>
            </p>
            <p class="wp100">
              <b class="txtParam">订&nbsp;&nbsp;货&nbsp;号：</b>
              <span class="order-number">{{product.part_number}}</span>
            </p>
          </div>
          <div class="pro_price clearfix">
            <p>
              <b>会员价：</b>
              <span class="f30 fw t-count">
                <i class="f30">¥</i>
                {{Number(product.discount_price.toString().match(/^\d+(?:\.\d{0,2})?/))}}
              </span>
            </p>
            <p class="row2">
              <b class="w-Auto">品牌：</b>
              <span class="mr10">
                <router-link
                  :to="`/brand/${product.brand_id}`"
                  target="_blank"
                  style="color:#4448f8;"
                >{{product.brand_name}}</router-link>
              </span>
            </p>
            <p>
              <b>市场价：</b>
              <span class="mline" style="color: #333333;">¥{{product.price}}</span>
            </p>
            <p>
              <b class="w-Auto">系列：</b>
              <span>{{product.series_name}}</span>
            </p>
          </div>
          <img class="goods_bj" src="../../assets/img/goods_bj.png" alt />
          <div class="pro_desc clearfix" v-if="product.parameters">
            <p v-for="[key, value] in Object.entries(product.parameters)" :key="key">
              <b>{{key}}：</b>
              <span>{{value}}</span>
            </p>
          </div>
          <div class="m-basket">
            <div class="u-fill">
              <el-input-number v-model="amount" :min="1"></el-input-number>
            </div>
            <div id="ContentPlaceHolder1_btnAddCart">
              <button class="btn-basket" @click="addCart">
                <i class="bg_ico ico_cart"></i>加入购物车
              </button>
            </div>
          </div>
          <div class="pro_contact clearfix ml30 mt30 ceshi" style="display: none;">
            <div class="attach" style="display:block">
              <div class="btn-wrap" onclick="selectAttach(14322)">
                <span class="bg-ico-attach"></span>
                <a href="#">选购附件</a>
              </div>
              <!-- 附件层-->
              <div class="f-table-box" style="left:148px; bottom:-70px;">
                <div class="wrap">
                  <!--关闭-->
                  <i class="close" onclick="closeAttachBox()"></i>
                  <!--箭头-->
                  <i class="attach-arrow"></i>

                  <div class="title">
                    <ul>
                      <li class="col_1">型号/订货号</li>
                      <li class="col_2">市场价格</li>
                      <li class="col_3">会员价</li>
                      <li class="col_4">库存</li>
                      <li class="col_5">数量</li>
                    </ul>
                  </div>
                  <div class="body" id="eleAttachDataList"></div>
                  <div class="page">
                    <span>第</span>
                    <label id="attach_page_index"></label>
                    <span>页</span>&nbsp;&nbsp;
                    <span>共</span>
                    <label id="attach_toatal"></label>
                    <span>条</span>
                    <a href="#" class="disable pre-page" onclick="attach_page(-1,this)">上一页</a>
                    <a href="#" class="next-page" onclick="attach_page(1,this)">下一页</a>
                  </div>
                  <div class="bottom" onclick="attachAddCart_click()">
                    <i class="cart"></i>
                    <span>加入购物车</span>
                  </div>
                </div>
              </div>
              <div class="f-table-box-bg" onclick="closeAttachBox()"></div>
            </div>

            <div class="sample" style="display: none;">
              <div class="btn-wrap" onclick="selectSample(14322)">
                <span class="bg-ico-sample"></span>
                <a href="#">产品样本</a>
              </div>
              <!-- 产品样本开始-->
              <div class="sampleBox" style="display:none">
                <div class="sampleBox_div">
                  <div class="sampleBox_closediv" onclick="closeSampleBox()">
                    <img src="/images/icon_close_f.png" class="sampleBox_closeimg" />
                  </div>
                  <div class="sampleBox_content">
                    <div class="sampleBox_row" style="border-bottom:none">
                      <p class="sampleBox_rowmain">
                        西门子_产品样本_5SY
                        终端配电产品.pdf
                      </p>
                      <p class="sampleBox_rowstitle">文件大小：12.64MB</p>
                      <div class="btn_downsample">
                        <!-- <a
                        href="https://zydmall-product-images.oss-cn-shenzhen.aliyuncs.com/product/sample/西门子/中低压配电/微型断路器/微型断路器/5SY（国产）/样本资料/西门子_产品样本_5SY 终端配电产品.pdf"
                        target="_blank">在线预览</a>-->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="samplejiao" style="display:none"></div>
              <div class="f-table-box-bg" onclick="closeSampleBox()"></div>
              <!-- 产品样本结束-->
            </div>
          </div>
          <p class="ml30 mt30" style="display: inline-block;">图片仅供参考，不做为选型购买的依据。</p>
          <span
            style="font-size: 15px;margin-left: 40px;cursor: pointer"
            @click="showSouc(product.id)"
          >
            <i class="el-icon-star-on" :class="souctf?'redi':''">收藏商品</i>
          </span>
        </div>

        <div class="advertisement">
          <div v-if="product.business" style="display: flex;flex-flow: column;">
            <div>
              <img :src="product.business.logo" alt />
              <p style="text-align: center;margin-top: 10px;">{{product.business.name}}</p>
            </div>
            <div class="dlexs">
              <span>联系卖家:</span>
              <span>
                <a
                  target="_blank"
                  :href="'http://wpa.qq.com/msgrd?v=3&uin='+product.business.email+'&site=qq&menu=yes'"
                >
                  <img
                    style="width: 25px;height: 25px;margin: 0;"
                    src="https://pub.idqqimg.com/wpa/images/counseling_style_51.png"
                    alt
                  />
                </a>
              </span>
            </div>
            <div class="dlexs">
              <span>已成交:</span>
              <span>{{product.sold_count}}套</span>
            </div>
            <div class="dlexs">
              <span>成交金额:</span>
              <span>{{product.sold_count*Number(product.discount_price)}}元</span>
            </div>
            <div class="dlexs">
              <span>企业类型:</span>
              <span>{{product.business.company_form === 'dealer'?'授权经销商':product.business.company_form === 'factory'?'生产厂家':'分销商'}}</span>
            </div>
            <div class="storeBtn">
              <router-link :to="`/sellerHome/?id=${product.business.id}`" target="_blank">进入店铺</router-link>
            </div>
          </div>
          <div v-else>
            <div>
              <img :src="product.brand.pc_logo_image" alt />
            </div>
            <img src="../../assets/img/zzkp_bj.png" alt />
            <img src="../../assets/img/yhzc_gg.png" alt />
          </div>
          <div v-if="product.business">
            <div class="dlexss">
              <span>负责人</span>
              <span>{{product.business.user_name}}</span>
            </div>
            <div class="dlexss">
              <span>负责人电话</span>
              <span>{{product.business.phone}}</span>
            </div>
            <div class="dlexss">
              <span>负责人QQ</span>
              <span>{{product.business.email}}</span>
            </div>
          </div>
          <div v-else>
            <div style="color:#666">服务说明</div>
            <div>1.由工流界发货,并提供售后服务.</div>
            <div style="line-height: 16px">2.因库存实时变化,具体发货时间以实际发货为准.</div>
            <div style="color:#666">售后咨询</div>
            <div>
              400-618-0107
              <a href=" https://wpa.qq.com/msgrd?v=3&uin=578898066&site=qq&menu=yes">
                <span style="float: right;">在线客服</span>
                <svg-icon style="float: right;" icon-class="QQkefu" class-name="QQkefu" />
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="tab_contain">
        <div class="pro_title tab_menu" data="nomove" ev="click">
          <a href="javascript:;" class="crently">商品介绍</a>
          <!-- <a href="javascript:;">资料下载</a> -->
        </div>
        <div class="tab_content plr15 ptb20">
          <!-- 商品介绍-->
          <div class="tabtxt">
            <div
              v-if="product.description || product.remarks"
              class="pro_detail_info"
              v-html="product.description || product.remarks"
            ></div>
            <img v-else src="../../assets/img/emptyCarta.jpg" alt />
            <div v-if="product.business.images" style>
              <img
                style="max-height:745px;
		                max-width: 720px; 
		                vertical-align:middle;
                    display: block"
                v-for="(item,index) in product.business.images"
                :key="index"
                :src="item"
                alt
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
import ImageMagnifier from "@/components/ImageMagnifier.vue";
import { mapMutations, mapActions } from "vuex";
import { productsDetail, getCollection, deleteCollection } from "@/api/goods";
import { addCart } from "@/api/cart";
export default {
  name: "ProductDetail",
  metaInfo: {
    title: "商品详情",
    titleTemplate: "工流界MRO一站式采购商城",
  },
  components: {
    ImageMagnifier,
  },
  data() {
    return {
      product: {
        parameters: [],
      },
      souctf: false,
      titleTop: "",
      amount: "",
      activeId: "1",
      smallImgSrc: "",
      bigImgSrc:
        "https://admin.haoglj.com/uploads/images/7088769f308c82f0e5e36dd3f8deea6f.png",
      goods: [
        // {
        //   id: '1',
        //   big: 'https://img.zydmall.com/public/images/e5/82/7a/d11f0f4858920c70635e6c31897d664eb5f7c20b.jpg',
        //   mid: 'https://img.zydmall.com/public/images/06/91/1f/2c083e662c6bda31941e541e120caa11efa29901.jpg',
        //   mini: 'https://img.zydmall.com/public/images/4a/e8/5d/e93cedc1eca21bcf785a0dfb494fa26b4ff7f0bc.jpg'
        // },
        // {
        //   id: '2',
        //   big: 'https://img.zydmall.com/public/images/b2/81/0b/789d2596d0ca0de52a7918c5f76c9a3b0d28d472.jpg',
        //   mid: 'https://img.zydmall.com/public/images/44/de/e9/9bcebde014d3ebcf7046e762f8046bee79daf994.jpg',
        //   mini: 'https://img.zydmall.com/public/images/59/dc/ad/fe8e360de47904b767525a1f899ecbbf4aec016a.jpg'
        // },
        // {
        //   id: '3',
        //   big: 'https://img.zydmall.com/public/images/b3/ce/c5/ecf4634f692db1f7feba89fed9920460aee60bbf.jpg',
        //   mid: 'https://img.zydmall.com/public/images/97/be/ed/404f172b83059dc2ab348c10806ee8e5ee9a3226.jpg',
        //   mini: 'https://img.zydmall.com/public/images/50/aa/90/4adec962ae5576a450312626b257f2cf2ec7a061.jpg'
        // },
        // {
        //   id: '4',
        //   big: 'https://img.zydmall.com/public/images/d2/74/e5/81d7aa2336ab92fc8281faec3ca20e179d26bc78.jpg',
        //   mid: 'https://img.zydmall.com/public/images/16/80/aa/87f06267c32656d2a44bcdb463fac483d1cc5e93.jpg',
        //   mini: 'https://img.zydmall.com/public/images/f6/d6/bb/28549d6b5d3b4bb893cc636470c5571279b9fe87.jpg'
        // }
      ],
    };
  },
  watch: {
    $route(to, from) {
      this.fetchDetail();
    },
  },
  created() {
    this.fetchDetail();
    console.log(this.product.parameters);
  },
  mounted() {
    this.setHasNav(false);
  },
  methods: {
    ...mapMutations({
      setHasNav: "app/SET_PAGE_HAS_NAV",
    }),
    ...mapActions({
      fetchCartAmount: "cart/fetchCarts",
    }),
    tbSelect(id) {
      this.activeId = id;
      const selectedGoods = this.goods.filter((item) => item.id === id)[0];
      this.smallImgSrc = selectedGoods.mid;
      this.bigImgSrc = selectedGoods.big;
    },
    async fetchDetail() {
      const res = await productsDetail(this.$route.params.id);
      console.log(res);
      console.log("============");
      this.product = res;
      const titleTop = [{}, {}, {}];
      const title = this.product.category.full_name.split("-");
      const titleId = this.product.category.full_id.split("-");
      for (let i = 0; i < title.length; i++) {
        titleTop[i].titlea = title[i].trim();
      }
      for (let d = 0; d < script.titleId.length; d++) {
        titleTop[d].id = titleId[d].trim();
      }
      if (res.favorite) {
        this.souctf = true;
      }
      this.titleTop = titleTop;
      console.log(this.titleTop);
    },
    async addCart() {
      try {
        await addCart({
          product_id: this.product.id,
          amount: this.amount,
        });
        this.$message.success("添加购物车成功");
        this.fetchCartAmount();
      } catch (e) {
        console.log(e);
      }
    },
    showSouc(id) {
      this.souctf = !this.souctf;
      if (this.souctf) {
        const res = getCollection(id);
        this.$message.success("商品收藏成功");
      } else {
        deleteCollection(id);
        this.$message.success("商品已取消收藏");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.product-detail {
  background-color: #ffffff;
  margin-bottom: 90px;
}
.safe {
  width: 1200px;
  margin: 0 auto;
}
.page_posit {
  height: 50px;
  line-height: 50px;
  text-align: left;
}

.page_posit i {
  margin: 0 10px;
}

.pro_detail {
  padding: 10px;
  display: flex;
  background: #fff;
  border: 1px solid #e8e8e8;
}

.xs_left {
  width: 400px;
  margin-right: 40px;
  float: left;
  position: relative;
  z-index: 3;
}
.page_thumb {
  width: 100%;
  z-index: 1;
  position: relative;
}

.page_thumb a {
  width: 18px;
  border: 1px solid #eee;
  height: 58px;
  line-height: 58px;
  position: absolute;
  bottom: 0;
  background: #f8f8f8;
  color: #666;
}

.page_thumb a:hover {
  background: #4448f8;
  border-color: #4448f8;
}

.page_thumb a i {
}

.page_thumb a.pre {
  left: 0;
}

.page_thumb a.next {
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page_thumb a.pre:hover i {
  color: #ffffff;
}

.page_thumb a.next:hover i {
  color: #ffffff;
}

.page_thumb a.pre i {
}

.page_thumb a.next i {
}

.box {
  width: 400px;
}

.box_list {
  width: 350px;
  overflow: hidden;
  height: 60px;
  margin: 15px auto 0;
  position: relative;
}

.tb-thumb {
}

.tb-thumb li {
  float: left;
  width: 60px;
  height: 60px;
  padding: 0 5px;
  position: relative;
}

.tb-thumb li img {
  width: 58px;
  height: 58px;
  border: 1px solid #e6e6e6;
}

.tb-booth {
  position: relative;
  z-index: 1;
  width: 400px;
  height: 400px;
}

.tb-booth .tb_img {
  width: 400px;
  height: 400px;
  position: relative;
  display: block;
}

.tb-booth img {
  width: 400px;
  height: 400px;
}

.tb-thumb li.tb-selected {
}

.tb-thumb li.tb-selected img {
  border: 2px solid #4448f8;
  width: 56px;
  height: 56px;
}
.xs_right {
  width: 678px;
  float: left;
  text-align: left;
}

.xs_right p {
  color: #666;
}

.xs_right {
  .name {
    color: #333333;
    font-size: 20px;
    height: 20px;
    line-height: 20px;
    font-weight: bold;
  }
}

.pro_price {
  padding: 10px 0;
  z-index: 2;
  position: relative;
  font-size: 12px;
  color: #666;
  margin: 39px 0;
}

.pro_price .t-count {
  display: inline-block;
  margin-top: -2px;
  color: red;
}

.pro_price .t-count i {
  display: inline-block;
  width: 22px;
}

.pro_price p {
  width: 50%;
  height: 38px;
  float: left;
  line-height: 38px;
}

.pro_price p b {
  margin-left: 30px;
  color: #999;
  width: 64px;
  display: inline-block;
  vertical-align: top;
}

.pro_price p.row2 span {
  display: inline-block;
  vertical-align: top;
}

.pro_desc p {
  width: 50%;
  float: left;
  line-height: 30px;
  color: #333;
}

.pro_desc {
  .order-number {
    color: red;
  }
}

.pro_desc p.wp100 {
  width: 100%;
  float: none;
}

.pro_desc p b {
  float: left;
  margin-left: 30px;
  color: #999;
  display: inline-block;
}

.pro_price p b.w-Auto {
  width: auto;
  min-width: 48px;
}

.pro_desc p b.txtParam {
  min-width: 62px;
  text-align-last: justify;
}

.pro_desc p span {
  overflow: hidden;
  word-break: break-all;
}

.attach,
.sample {
  display: inline-block;
  float: left;
  width: 138px;
  height: 38px;
  text-align: center;
  border: 1px solid #e6e6e6;
  position: relative;
  background: #4448f8;
  margin-right: 20px;
}
.attach .btn-wrap,
.sample .btn-wrap {
  cursor: pointer;
  width: 138px;
  height: 38px;
  cursor: pointer;
}
.btn-wrap > a {
  color: #fff;
  display: inline-block;
  text-align: center;
  margin-left: 20px;
  line-height: 38px;
}
.btn-wrap > a:hover {
  color: #fff;
}
.bg-ico-attach {
  display: inline-block;
  width: 17px;
  height: 15px;
  position: absolute;
  left: 23%;
  top: 30%;
  background: url(~@/assets/img/icon_attach.png) no-repeat;
}
.bg-ico-sample {
  display: inline-block;
  width: 17px;
  height: 18px;
  position: absolute;
  left: 23%;
  top: 10px;
  background: url(~@/assets/img/icon_sample.png) no-repeat;
}

.pro_contact .collect,
.pro_contact .favor {
  width: 138px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  float: left;
  border: 1px solid #e6e6e6;
  position: relative;
  background: #f8f8f8;
}

.pro_contact .collect:hover,
.pro_contact .favor:hover {
  background: #4448f8;
  color: #fff;
  border-color: #4448f8;
}

.pro_contact b a {
  width: 138px;
  height: 38px;
  display: block;
  text-indent: 25px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

.pro_contact b i {
  width: 16px;
  height: 18px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -9px 0 0 -41px;
  background-position: 0 -227px;
}

.pro_contact .favor:hover a {
  color: #fff;
}

.pro_contact .favor:hover i {
  background-position: 0 -246px;
}

.pro_contact .collect i {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  margin: -4px 10px 0 0;
  background-position: 0 -265px;
}

.pro_contact .collect.actived i,
.pro_contact .collect.actived:hover i {
  background-position: 0 -297px;
}

.pro_contact .collect:hover i {
  background-position: 0 -281px;
}

.pro_contact .collect.actived:hover {
  background: #f8f8f8;
  border: 1px solid #e6e6e6;
  color: #666;
}

.pro_search input {
  height: 30px;
  line-height: 30px;
  width: 210px;
  padding: 0 15px;
  border: none;
}

.pro_search a {
  width: 70px;
  height: 30px;
  line-height: 30px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

#goodsTotal {
  font-size: 18px;
  color: #ff0000;
  margin: 0 4px;
}

.product_table {
  background: #fff;
  overflow: auto;
  max-height: 657px;
  border: 1px solid #e6e6e6;
  border-bottom: none;
  border-top: none;
  position: relative;
  color: #333;
}

.product_table {
  position: relative;
  z-index: 1;
}

.product_table th,
.product_table td {
  border-left: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  line-height: 30px;
  padding: 5px;
  white-space: nowrap;
  text-align: center;
}

.product_table th em {
  margin: 0 8px;
  position: relative;
}

.product_table tr th:first-child,
.product_table td:first-child {
  border-left: none;
}

.product_table td.proTime {
  text-align: left;
}

.product_table td.proTime .proTimeBox {
  min-width: 100px;
}

.product_table td.proTime .tipTime {
  min-width: 100px;
  color: #999;
  text-align: center;
}

.product_table td.proTime i {
  vertical-align: 0;
}

.product_table td .t-over {
  max-width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product_table tr th {
  background: #eee;
  color: #666;
  cursor: pointer;
}

.product_table tr.selecttr td {
  background: #f8f8f8;
}

.product_table tr.selecttr div {
  display: inline-block;
  position: relative;
}

.product_table tr.selecttr div span {
  background: #fff;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
  height: auto;
  left: 0;
  line-height: 25px;
  padding-right: 10px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.product_table tr.selecttr div span:after {
  content: "";
  border-left: 4px solid transparent;
  border-top: 6px solid #666;
  border-right: 4px solid transparent;
  position: absolute;
  top: 10px;
  right: 6px;
}

.product_table tr.selecttr div select {
  cursor: default;
  position: relative;
  z-index: 1;
  opacity: 0;
  padding: 4px 0;
}

.product_table .txt {
  background-color: #fff;
  color: #333;
  height: 24px;
  line-height: 24px;
  margin-right: 2px;
  padding: 0;
  text-align: center;
  width: 55px;
  font-size: 12px;
}

.product_table tr.hover td {
  background: #d8f8f8;
}

a.clear_num {
  display: inline-block;
  color: #999;
  cursor: pointer;
  margin-left: 8px;
  vertical-align: middle;
}

a.clear_num:hover {
  color: #4448f8;
}

.product_table tr th .orderby {
  display: inline-block;
  width: 7px;
  margin-left: 5px;
  height: 4px;
  margin-top: -3px;
  vertical-align: middle;
}

.product_table tr th .orderby i {
  width: 7px;
  height: 4px;
  display: block;
  background-position: -17px -147px;
}

.product_table tr th .orderby i.up {
  background-position: -25px -147px;
}

.m-basket {
  padding-left: 30px;
  margin-top: 40px;
  overflow: hidden;
}

.m-basket .u-fill {
  position: relative;
  float: left;
  overflow: hidden;
}

.m-basket .u-fill .ipt-num {
  float: left;
  width: 46px;
  height: 46px;
  box-sizing: border-box;
  text-align: center;
  border-width: 1px 0;
  border-style: solid;
  border-color: #cacac8;
}

.m-basket .u-fill .btn {
  float: left;
  display: inline-block;
  width: 23px;
  height: 46px;
  background: #fff;
  border: 0;
  color: #666;
  border: 1px solid #cacac8;
  box-sizing: border-box;
  background: #f1f1f1;
}

.m-basket .u-fill .btn:disabled {
  color: #b7b7b7;
}

.m-basket .u-fill .btn-min {
  border-top: 1px solid #cacac8;
}

.m-basket .btn-basket {
  cursor: pointer;
  color: #fff;
  border: 0;
  height: 46px;
  font-size: 18px;
  padding: 0 22px;
  margin-left: 12px;
  background: #db0012;
  outline: 0;
}

.m-basket .btn-basket:hover {
  background: red;
}

.btn-addCart-inner {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  padding: 0 16px 0 14px;
  color: #666;
  font-size: 12px;
  background: #e6e6e6;
}

.i-addCartBatch {
  display: inline-block;
  width: 20px;
  height: 21px;
  vertical-align: -5px;
  margin-right: 8px;
  -webkit-transition: linear 0.3s;
  -o-transition: linear 0.3s;
  transition: linear 0.3s;
  background: url(~@/assets/img/i-addCartBatch.png) no-repeat center center;
}

.btn-addCart-inner:hover .i-addCartBatch {
  background: url(~@/assets/img/i-addCartBatch-active.png) no-repeat center
    center;
}

.m-loginBox {
  position: relative;
  display: none;
  z-index: 99999;
}

.m-loginBox .container {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
}

.m-loginBox .m-login {
  position: relative;
  margin-right: 0;
  padding: 30px 60px 50px;
  box-shadow: 0 0 10px #ccc;
  background: #fff;
}

.m-loginBox .m-login .hd {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.m-loginBox .m-login .hd .loginLogo {
  float: left;
}

.tab_contain {
  border: 1px solid #e6e6e6;
}
.pro_title {
  height: 38px;
  line-height: 38px;
  background: #f8f8f8;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
  text-align: left;
}
.pro_title span {
  padding-left: 18px;
}

.pro_title a {
  -webkit-transition: all 0;
  -moz-transition: all 0s;
  transition: all 0s;
}

.pro_title a {
  width: 138px;
  border-right: 1px solid #e6e6e6;
  display: inline-block;
  height: 38px;
  text-align: center;
  color: #333;
  margin-top: -2px;
}

.pro_title a:hover {
  color: #4448f8;
}

.pro_title a.crently {
  background: #fff;
  height: 37px;
  line-height: 37px;
  border-bottom: 1px solid #fff;
  border-top: 2px solid #4448f8;
  top: 1px;
  position: relative;
  left: 0;
  z-index: 1;
  color: #4448f8;
  font-weight: bold;
}

.pro_data {
  background: #f8f8f8;
}
/deep/ .el-input-number {
  .el-input-number--mini {
    height: 46px;
    line-height: 46px;
  }
  .el-input__inner {
    height: 46px;
    line-height: 46px;
  }
  .el-input-number__decrease,
  .el-input-number__increase {
    height: 46px;
    line-height: 46px;
    background-color: #4448f8;
    color: #ffffff;
    &.is-disabled {
      background-color: #dddddd;
    }
  }
}
.goods_bj {
  position: absolute;
  top: 184px;
  width: 450px;
  height: 120px;
}
.advertisement > div:nth-child(1) {
  width: 206px;
  height: 286px;
  border: 2px solid #eeeeee;
  border-radius: 3px;
  img:nth-child(1) {
    width: 117px;
    height: 54px;
    margin-top: 17px;
    margin-left: 48px;
  }
  img:nth-child(2) {
    margin-top: 16px;
    margin-left: 14px;
  }
  img:nth-child(3) {
    width: 170px;
    height: 108px;
    margin-top: 10px;
    margin-left: 20px;
  }
}
.advertisement > div:nth-child(2) {
  width: 206px;
  margin-top: 10px;
  height: 151px;
  border: 2px solid #eeeeee;
  border-radius: 3px;
  padding: 10px 0;
  div {
    margin-top: 15px;
    padding: 0 15px;
    color: #333;
  }
}
.redi {
  color: #db0012;
}
.storeBtn {
  display: inline-block;
  background-color: #4448f8;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  margin: auto;
  > a {
    color: #fff;
  }
}
.dlexs {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  > span {
    flex: 1;
    margin: 5px;
    &:nth-child(1) {
      text-align: right;
      padding-right: 5px;
    }
    &:nth-child(2) {
      padding-left: 5px;
    }
  }
}

.dlexss{
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  > span {
    margin: 0 5px;
    &:nth-child(1) {
      text-align: right;
      padding-right: 5px;
    }
    &:nth-child(2) {
      padding-left: 5px;
    }
  }
}
</style>
